//获取所有课程列表
axios.get('/api/curriculum/list')
    .then((response) => {
        const {data} = response.data;
        let str = ''
        for (const dataKey in data) {
            str += `
            <li class="nav-item">
                <a class="nav-link  w-100 text-start text-decoration-none " id="${data[dataKey].currNo} "  role="button" onclick="renderMain(${data[dataKey].currNo})" data-bs-toggle="pill">${data[dataKey].name}</a>
            </li>
         `

        }
        document.querySelector('#sidebarMenu ul').innerHTML = str
        document.querySelector('#sidebarMenu ul').firstElementChild.firstElementChild.classList.add('active')
    })
    .catch((error) => {
        console.log(error);
    })

//渲染右边的所有数据（默认课程是42）
function renderMain(value = 42) {
    console.log(value)
    axios.get(`/api/choose/marklist?currNo=${value}`)
        .then((response) => {
            const {data} = response.data;
            let classListArray = []

            function screen(min, big) {
                let arr = []
                for (let i = 0; i < data.length; i++) {
                    if (data[i].finalscore >= min && data[i].finalscore < big) {
                        arr.push(data[i]);
                    }

                    if (classListArray.indexOf(data[i].className) === -1) {
                        classListArray.push(data[i].className)
                    }
                }
                return arr.length
            }

            option = {
                series: [{
                    data: [
                        {value: screen(80, 100), name: '80-100'},
                        {value: screen(70, 80), name: '70-80'},
                        {value: screen(60, 70), name: '60-70'},
                        {value: screen(50, 60), name: '50-60'},
                        {value: screen(40, 50), name: '40-50'},
                        {value: screen(-10, 40), name: '0-40'},
                    ]
                }]
            }
            option && myChart.setOption(option);

            let newData = JSON.parse(JSON.stringify(data))
            //渲染深拷贝后的新数据
            renderList(
                //冒泡排序,通过对比时间进行排序
                newData.sort(function (a, b) {
                    let dateA = new Date(a.finalscore);
                    let dateB = new Date(b.finalscore);
                    return dateB - dateA;
                }))

            //阻止表单默认事件
            document.querySelector('header form').addEventListener('submit', (e) => {
                e.preventDefault()
            })

            //根据名字搜索后渲染 input()
            function renderSearch(input) {
                renderList(newData.filter(item => {
                    if (!item.realName) {
                        return ''
                    }
                    return item.realName.indexOf(input) > -1
                }))
            }

            //监听输入的数据，并进行筛选
            const inputSearch = document.querySelector('form input')
            renderSearch(inputSearch.value)
            inputSearch.addEventListener('input', debounce(function () {
                //筛选渲染数据
                renderSearch(inputSearch.value)
            }));


            //根据获取到的所有数据锁
            const classList = document.querySelector('table [data-name="classList"]')
            let str = ''
            str +=`<li><a class="dropdown-item" href="#" data-name="全部">全部</a></li>`

            for (let i = 0; i < classListArray.length; i++) {
                str += `
                <li><a class="dropdown-item" href="#" data-name="${classListArray[i]}">${classListArray[i]}</a></li>
                `
            }
            classList.innerHTML = str



            //班级筛选
            classList.addEventListener('click', (e) => {
                e.preventDefault()

                if (e.target.tagName === 'A' && e.target.classList && e.target.dataset.name != "全部") {
                    console.log(e.target.dataset.name)
                    renderSearchCN(e.target.dataset.name)
                }
                else{
                    renderSearchCN('')
                }
            })

            //班级筛选调用的函数
            function renderSearchCN(input, data = newData) {
                console.log(data, input)
                renderList(data.filter(item => {
                    if (!item.className) {
                        return ''
                    }
                    return item.className.indexOf(input) > -1
                }))
            }



        })
        .catch((error) => {
            console.log(error);
            console.log(data)
        })
}
//执行渲染
renderMain()

//渲染右边数据列表
function renderList(data) {
    let str = ''
    document.querySelector('table tbody').innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        const tr = document.createElement('tr')

        tr.role = 'button'
        tr.setAttribute('scope','row')
        tr.innerHTML += `
                    <tr scope="row" role="button">
                            <td>${i + 1}</td>
                            <td>${data[i].stuNum}</td>
                            <td>${data[i].realName}</td>
                            <td>${data[i].className}</td>
                            <td>${data[i].score}</td>
                            <td>${data[i].plusScoreSum}</td>
                            `
        if (data[i].plusScoreDesc) {
            tr.innerHTML += `<td>
                    <button type="button" class="btn btn-secondary"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-custom-class="custom-tooltip"
                            data-bs-title="${data[i].plusScoreDesc}">
                        查看说明
                    </button>
                    </td>`
        } else {
            tr.innerHTML += `<td class="overflow-hidden " style="max-width: 100px; height:10px;"></td>`
        }

        tr.innerHTML += `
                            <td>${data[i].calscore}</td>
                            <td>${data[i].finalscore}</td>
                        
                    </tr>
                `
        str = tr
        let strin = data[i].personalLink
        tr.addEventListener('click', (e) => {
            open(`./personal.html${strin.slice(strin.indexOf('?'))}`)
        })
        document.querySelector('table tbody').appendChild(str)

    }


    //bs5的js（鼠标放到查看说明上面的时候显示文本）
    const tooltipTriggerList = document.querySelectorAll('table tbody [data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))


}


// //搜索函数
// function search(data) {
//     //阻止表单默认事件
//     document.querySelector('header form').addEventListener('submit', (e) => {
//         e.preventDefault()
//     })
//
//
//     //根据名字搜索后渲染 input()
//     function renderSearch(input) {
//         renderList(data.filter(item => {
//             if (!item.realName) {
//                 return ''
//             }
//             return item.realName.indexOf(input) > -1
//         }))
//     }
//
// //监听输入的数据，并进行筛选
//     const inputSearch = document.querySelector('form input')
//     renderSearch(inputSearch.value)
//     inputSearch.addEventListener('input', debounce(function () {
//         //筛选渲染数据
//         renderSearch(inputSearch.value)
//     }));
// }






